<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="keywords" content="#">
<meta name="description" content="#">
<title>途羊旅游网</title>
<!-- Fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144"
	href="assets/images/favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="114x114"
	href="assets/images/favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="72x72"
	href="assets/images/favicon.ico">
<link rel="apple-touch-icon-precomposed"
	href="assets/images/favicon.ico">
<link rel="shortcut icon" href="assets/images/favicon.ico">
<!-- Bootstrap -->
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<!-- Fontawesome -->
<link href="assets/css/font-awesome.css" rel="stylesheet">
<!-- Flaticons -->
<link href="assets/css/font/flaticon.css" rel="stylesheet">
<!-- Slick Slider -->
<link href="assets/css/slick.css" rel="stylesheet">
<!-- Range Slider -->
<link href="assets/css/ion.rangeSlider.min.css" rel="stylesheet">
<!-- Datepicker -->
<link href="assets/css/datepicker.css" rel="stylesheet">
<!-- magnific popup -->
<link href="assets/css/magnific-popup.css" rel="stylesheet">
<!-- Nice Select -->
<link href="assets/css/nice-select.css" rel="stylesheet">
<!-- Custom Stylesheet -->
<link href="assets/css/style.css" rel="stylesheet">
<!-- Custom Responsive -->
<link href="assets/css/responsive.css" rel="stylesheet">
<!-- Google Fonts -->
<link
	href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700&display=swap"
	rel="stylesheet">
<link
	href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
	rel="stylesheet">
<!-- CSS for IE -->
<!--[if lte IE 9]>
        <link rel="stylesheet" type="text/css" href="css/ie.css" />
    <![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
      <script type='text/javascript' src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
      <script type='text/javascript' src="http://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.js"></script>
    <![endif]-->
<!-- place -->
</head>
<body>
	<!-- Start Header -->
	<header class="header">
		<!-- Topbar -->
		<div class="topbar bg-custom-blue">
			<div class="container">
				<div class="row">
					<div class="col-sm-6">
						<div class="left-side">
							<ul class="custom-flex">
								<li><a href="#" class="text-custom-white"> <i
										class="fab fa-facebook-f"></i>
								</a></li>
								<li><a href="#" class="text-custom-white"> <i
										class="fab fa-twitter"></i>
								</a></li>
								<li><a href="#" class="text-custom-white"> <i
										class="fab fa-instagram"></i>
								</a></li>
								<li><a href="#" class="text-custom-white"> <i
										class="fab fa-linkedin"></i>
								</a></li>
							</ul>
						</div>
					</div>
					<div class="col-sm-6">
						<div class="right-side">
							<ul class="custom-flex" id="custom-flex">
							
								
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- Topbar -->
		<!-- Navigation -->
		<div class="navigation">
			<div class="container">
				<div class="row">
					<div class="col-12">
						<div class="main-navigation">
							<div class="logo">
								<a href="index.jsp"> <img src="assets/images/TuYang-logo.png"
									class="img-fluid image-fit" alt="img">
								</a>
							</div>
							<div class="main-menu">
								<div class="logo">
									<a href="#"> <img
										src="assets/images/toor-logo.png" class="img-fluid image-fit"
										alt="img">
									</a>
								</div>
								<nav>
									<ul class="custom-flex">
										<li class="menu-item active"><a href="index.jsp"
											class="text-light-dark">首页</a></li>
										<li class="menu-item"><a href="rooms-hotels.jsp"
											class="text-light-dark">酒店</a></li>
										<li class="menu-item"><a href="scenic.jsp"
											class="text-light-dark">景点</a></li>


										<li class="menu-item"><a href="order.jsp"
											class="text-light-dark">我的订单</a></li>
										<li class="menu-item"><a href="gallery.jsp"
											class="text-light-dark">我的收藏</a></li>
										<li class="menu-item"><a href="person-center.jsp"
											class="text-light-dark">个人中心</a></li>
									</ul>
								</nav>

							</div>
							<div class="hamburger-menu">
								<div class="menu-btn">
									<span></span> <span></span> <span></span>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- Navigation -->
	</header>
	<!-- End Header -->
	<!-- Start Slider -->
	<div class="slider p-relative">
		<div class="main-banner arrow-layout-1 ">
			<div class="slide-item">
				<img src="assets/images/flight-2.jpg" class="image-fit" alt="Slider">
				<div class="transform-center">
					<div class="container">
						<div class="row">
							<div class="col-lg-7">
								<div class="slider-content">
									<h1 class="text-custom-white">让我们一起发现世界!</h1>

								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="slide-item">
				<img src="assets/images/hotel-1.jpg" class="image-fit" alt="Slider">
				<div class="transform-center">
					<div class="container">
						<div class="row">
							<div class="col-lg-7">
								<div class="slider-content">
									<h1 class="text-custom-white">莫里茨最好的豪华酒店!</h1>

								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="slide-item">
				<img src="assets/images/flight.jpg" class="image-fit" alt="Slider">
				<div class="transform-center">
					<div class="container">
						<div class="row">
							<div class="col-lg-7">
								<div class="slider-content">
									<h1 class="text-custom-white">来一场说走就走的旅行!</h1>

								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- End Slider -->
	<!-- Start Banner tabs -->

	<!-- Start Our Services -->
    
    <!-- End Our Services -->
	<!-- End Banner tabs -->
	<!-- Start About Us -->

	<!-- End About Us -->
	<!-- Start Hotels -->
	
	
	<section class="section-padding hotels-sec bg-light-white">
		<div class="container">
			<div class="section-header">
				<div class="section-heading">
					<h3 class="text-custom-black">推荐酒店</h3>
                </div>
            </div>
            <div class="row" id="top-Hotel">
              
						
                    </div>
                </div>
            </div>
        </div>
	</section>
	
	
	<!-- End Hotels -->
	<!-- Start Our work -->

	<!-- End Our work -->
	<!-- Start Flights -->
	<section class="section-padding flights-sec bg-light-white">
		<div class="container">
			<div class="section-header">
				<div class="section-heading">
					<h3 class="text-custom-black">推荐景点</h3>

				</div>
			</div>
			<div class="row" id="top-scenic">
				
			</div>
		</div>
	</section>
	<!-- End Flights -->
	<!-- Start Cruise -->

	<!-- End Cruise -->
	<!-- Start Our Services -->

	<!-- End Our Services -->
	<!-- Start Hotels -->

	<!-- End Hotels -->
	<!-- Start Our Team -->

	<!-- End Our Team -->
	<!-- Start Why choose Us / Testimonials -->

	<!-- End Why choose Us / Testimonials -->
	<!-- Start Blog -->

	<!-- End Blog -->
	<!-- Start Partners -->

	<!-- End Partners -->
	<!-- Start Footer -->
    <footer class="section-padding footer">
        <div class="container">
            <div class="row">
                <div class="col-lg-3 col-md-6">
                    <div class="footer-box mb-md-40">
                        <h4 class="text-custom-white fw-600">About Us</h4>
                        <p class="text-custom-white">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
                        <p class="text-custom-white">
                            Lorem Ipsum is simply dummy text of the printing and typesetting industry...
                        </p>
                        <ul class="custom-flex socials">
                            <li><a href="#" class="text-custom-white fs-14"><i class="fab fa-facebook-f"></i></a></li>
                            <li><a href="#" class="text-custom-white fs-14"><i class="fab fa-twitter"></i></a></li>
                            <li><a href="#" class="text-custom-white fs-14"><i class="fab fa-linkedin"></i></a></li>
                            <li><a href="#" class="text-custom-white fs-14"><i class="fab fa-youtube"></i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <div class="footer-box mb-md-40">
                        <h4 class="text-custom-white fw-600">Quick Links</h4>
                        <ul class="custom links">
                            <li>
                                <a href="#" class="text-custom-white">Home</a>
                            </li>
                            <li>
                                <a href="#" class="text-custom-white">Hotels</a>
                            </li>
                            <li>
                                <a href="#" class="text-custom-white">Flights</a>
                            </li>
                            <li>
                                <a href="#" class="text-custom-white">Cruise</a>
                            </li>
                            <li>
                                <a href="#" class="text-custom-white">Blog</a>
                            </li>
                            <li>
                                <a href="#" class="text-custom-white">404</a>
                            </li>
                            <li>
                                <a href="#" class="text-custom-white">Contact Us</a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <div class="footer-box mb-sm-40">
                        <h4 class="text-custom-white fw-600">Instagram</h4>
                        <ul class="custom instagram " style="position: relative; height: 204px;">
                            <li style="position: absolute; left: 0px; top: 0px;">
                                <a href="#" class="text-custom-white popup">
                                    <img src="assets/images/gallery/g_gal_1.jpg" class="image-fit" alt="img">
                                </a>
                            </li>
                            <li style="position: absolute; left: 84.1406px; top: 0px;">
                                <a href="#" class="text-custom-white popup">
                                    <img src="assets/images/gallery/g_gal_2.jpg" class="image-fit" alt="img">
                                </a>
                            </li>
                            <li style="position: absolute; left: 168.281px; top: 0px;">
                                <a href="#" class="text-custom-white popup">
                                    <img src="assets/images/gallery/g_gal_3.jpg" class="image-fit" alt="img">
                                </a>
                            </li>
                            <li style="position: absolute; left: 0px; top: 68px;">
                                <a href="#" class="text-custom-white popup">
                                    <img src="assets/images/gallery/g_gal_4.jpg" class="image-fit" alt="img">
                                </a>
                            </li>
                            <li style="position: absolute; left: 84.1406px; top: 68px;">
                                <a href="#" class="text-custom-white popup">
                                    <img src="assets/images/gallery/g_gal_5.jpg" class="image-fit" alt="img">
                                </a>
                            </li>
                            <li style="position: absolute; left: 168.281px; top: 68px;">
                                <a href="#" class="text-custom-white popup">
                                    <img src="assets/images/gallery/g_gal_6.jpg" class="image-fit" alt="img">
                                </a>
                            </li>
                            <li style="position: absolute; left: 0px; top: 136px;">
                                <a href="#" class="text-custom-white popup">
                                    <img src="assets/images/gallery/g_gal_7.jpg" class="image-fit" alt="img">
                                </a>
                            </li>
                            <li style="position: absolute; left: 84.1406px; top: 136px;">
                                <a href="#" class="text-custom-white popup">
                                    <img src="assets/images/gallery/g_gal_8.jpg" class="image-fit" alt="img">
                                </a>
                            </li>
                            <li style="position: absolute; left: 168.281px; top: 136px;">
                                <a href="#" class="text-custom-white popup">
                                    <img src="assets/images/gallery/g_gal_9.jpg" class="image-fit" alt="img">
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <div class="footer-box mb-sm-40">
                        <h4 class="text-custom-white fw-600">Newsletter</h4>
                        <div class="newsletter">
                            <p class="text-custom-white">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </footer>
    <!-- End Footer -->

	<!-- Start Copyright -->
	<div class="copyright">
		<div class="container">
			<div class="row">
				<div class="col-12">
					<p class="text-custom-white">Copyright &copy; 2020.Company name
						All rights reserved.</p>
				</div>
			</div>
		</div>
	</div>
	<!-- End Copyright -->
	<div id="back-top" class="back-top">
		<a href="#top"><i class="flaticon-arrows"></i></a>
	</div>
	<!-- Place all Scripts Here -->
	<!-- jQuery -->
	<script src="assets/js/jquery.min.js"></script>
	<!-- Popper -->
	<script src="assets/js/popper.min.js"></script>
	<!-- Bootstrap -->
	<script src="assets/js/bootstrap.min.js"></script>
	<!-- Range Slider -->
	<script src="assets/js/ion.rangeSlider.min.js"></script>
	<!-- Slick Slider -->
	<script src="assets/js/slick.min.js"></script>
	<!-- Datepicker -->
	<script src="assets/js/datepicker.js"></script>
	<script src="assets/js/datepicker.en.js"></script>
	<!-- Isotope Gallery -->
	<script src="assets/js/isotope.pkgd.min.js"></script>
	<!-- Nice Select -->
	<script src="assets/js/jquery.nice-select.js"></script>
	<!-- magnific popup -->
	<script src="assets/js/jquery.magnific-popup.min.js"></script>
	<!-- Maps -->
	<!-- Custom Js -->
	<script src="assets/js/custom.js"></script>
	<!-- /Place all Scripts Here -->
	<script type="text/javascript">
		$(function() {
			getOrderByTime();
			//显示用户名和用户图片
			var user ="${sessionScope.user}";
				if(user!=""&&"${sessionScope.user.userPicture}"==null){
					$("#custom-flex").html("<li><img src=\"${pageContext.request.contextPath}/assets/images/dahaigui.jpg\"><li><li>用户名："+"${sessionScope.user.userName}"+"</li>");
				}else if(user!=""&&"${sessionScope.user.userPicture}"!=null){
					$("#custom-flex").html("<li><img style=\"width:30px;height:30px;  \" src=\"${pageContext.request.contextPath}/FileDownloadServlet?fileName="+
							"${sessionScope.user.userPicture}"+"\"><li>"+
							"<li>用户名："+"${sessionScope.user.userName}"+
							"<span style=\"margin-left:60px;cursor:pointer;\" id=\"btnLogout\">退出登录</span>"+
							"</li>");
				}else if(user==""){
					$("#custom-flex").html("<li><a href=\"userLogin.jsp\" class=\"text-custom-white\">登录</a></li>"+
							"<li><a href=\"register.jsp\" class=\"text-custom-white\">注册</a></li>");
				}
				
				$(document).on("click","#btnLogout",function(){
					
					location.href = "${pageContext.request.contextPath}/front/userLogin.jsp";
				});
				
				//对收藏按钮设置点击事件
				$(document).on("click","#btnGallery",function(){
					var scenicId=$(this).data("scenicid");
					if("${sessionScope.user.userId}"==""){
						alert("请先登录！");
						location.href = "${pageContext.request.contextPath}/front/userLogin.jsp";
					}else{
						
					
						$.ajax({
					   		 async:true,
					   		 type:"get",
					   		 url:"${pageContext.request.contextPath}/scenic",
					   		 data:{
					   			 op:"insertGallery",
					   			 scenicId:scenicId,
					   			 userId:"${sessionScope.user.userId}"
					   		 },
					   		 success:function(result){
					   			 console.log(result);
					   			 if("success"== result){
					   				alert("收藏成功!");
					   			 }else{
					   				alert("该景点已经被收藏了!");
					   			 }
					   			
					   		 },
					   		 error:function(){
					   			 alert("异步请求失败!");
					   		 }
					   	 });
					}
				});
				
				// 酒店点击收藏
				$(document).on("click","#hotelBtnGallery",function(){
					var hotelId=$(this).data("hotelid");
					console.log("hotelId" + hotelId);
					if("${sessionScope.user.userId}"==""){
						alert("请先登录！");
						location.href = "${pageContext.request.contextPath}/front/userLogin.jsp";
					}else{
						$.ajax({
					   		 async:true,
					   		 type:"get",
					   		 url:"${pageContext.request.contextPath}/HotelServlet",
					   		 data:{
					   			 op:"insertGallery",
					   			 hotelId:hotelId,
					   			 userId:"${sessionScope.user.userId}"
					   		 },
					   		 success:function(result){
					   			 console.log(result);
					   			 if("success"== result){
					   				alert("收藏成功!");
					   			 }else{
					   				alert("该景点已经被收藏了!");
					   			 }
					   			
					   		 },
					   		 error:function(){
					   			 alert("异步请求失败!");
					   		 }
					   	 });
					}
				});
				
				
				
		});
		function getOrderByTime() {
			$.ajax({
				async : true,
				type : "get",
				url : "${pageContext.request.contextPath}/frontindex",
				data : {
					op : "indexHotel"
				},
				dataType : "json",
				success : function(result) {
					showhotel(result);
				},
				error : function() {
					alert("异步请求失败!");
				}
			});

			$.ajax({
				async : true,
				type : "get",
				url : "${pageContext.request.contextPath}/frontindex",
				data : {
					op : "indexScenic"
				},
				dataType : "json",
				success : function(result) {
					showscenic(result);
				},
				error : function() {
					alert("异步请求失败!");
				}
			});
		}
		function showhotel(result) {
			// 调用渲染函数
			var content = "";
			for (var i = 0; i < result.length; i++) {
				console.log(result[i].hotelId);
				content += "<div class=\"col-3\">"
                        +"<div class=\"hotel-slider arrow-layout-2 row\">"
					    +"<div class=\"slide-item col-12\">"
						+ "<div class=\"hotel-grid\" >"
						+ "<div class=\"hotel-grid-wrapper bx-wrapper\">"
						+ "<a href=\"hotel-detail.html\">"
						+ "<img style=\"width:250px;height:250px;  \" src=\"${pageContext.request.contextPath}/HotelFileDownloadServlet?fileName="
						+ result[i].hotelPicture
						+ "\" class=\"full-width\" alt=\"img\"></a>"
						+ "</div>"
						+ "<div class=\"hotel-grid-caption padding-20 bg-custom-white p-relative\">"
						+ "<h4 class=\"title fs-16\"><a href=\"hotel-detail.html\" class=\"text-custom-black\">"
						+ result[i].hotelName
						+ "</h4>"
						+ "<span style=\"margin-left:120px;color:black;font-size:15px;\" class=\"price\">"
						+ "<small>地址：</small>"
						+ result[i].hotelAddress
						+ "</span>"
						+ "<div class=\"action\">"
						+ "<a style=\"padding: 12px 20px;\" class=\"btn-first btn-small\" href=\"hotel-detail.jsp?hotelId="+result[i].hotelId+"&hotelName="+result[i].hotelName+"&hotelPicture="+result[i].hotelPicture+"\" tabindex=\"0\">详情</a>"
						+ "<a style=\"padding: 12px 20px;margin-left:70px;\" class=\"btn-first btn-submit\" href=\"#\" tabindex=\"0\" id=\"hotelBtnGallery\" href=\"#\" data-hotelid=\""+result[i].hotelId+"\">收藏</a></div>"
						+ "</div>" + "</div>" + "</div>" + "</div>"+ "</div>" + "</div>";

			}
			$("#top-Hotel").html(content);
		}
		function showscenic(result) {
			console.log(result);
			// 调用渲染函数
			var content = "";
			for (var i = 0; i < result.length; i++) {
				content +="<div class=\"col-4\">"
				        +"<div class=\"flights-slider arrow-layout-2 row\">" 
					    +"<div class=\"hotel-grid\">"
						+ "<div style=\"margin-left:20px;\" class=\"hotel-grid-wrapper bx-wrapper\">"
						+ "<a href=\"hotel-detail.html\">"
						+ "<img style=\"width:300px;height:250px;\" src=\"${pageContext.request.contextPath}/FileDownloadServlet?fileName="
						+ result[i].scenicPicture
						+ "\" class=\"full-width\" alt=\"img\"></a>"
						+ "</div>"
						+ "<div class=\"hotel-grid-caption padding-20 bg-custom-white p-relative\">"
						+ "<h4 class=\"title fs-16\"><a href=\"hotel-detail.html\" class=\"text-custom-black\" tabindex=\"-1\">"
						+ result[i].scenicName
						+ "</h4>"
						+ "<span style=\"margin-left:220px;color:orange;font-size:20px;\" class=\"price\">"
						+ "<small>门票：</small>"
						+ result[i].scenicPrice
						+ "</span>"
						+ "<div class=\"action\">"
						+ "<a class=\"btn-first btn-small\" href=\"scenic-detail.jsp?scenicPrice="+result[i].scenicPrice+"&scenicName='"+result[i].scenicName+"'&scenicPicture='"+result[i].scenicPicture+"'&scenicDesc='"+result[i].scenicDesc+"'&scenicId="+result[i].scenicId+"  \" tabindex=\"-1\">详情</a>"
						+ "<a style=\"margin-left:70px;  \" class=\"btn-first btn-submit\" href=\"#\" tabindex=\"0\" id=\"btnGallery\" data-scenicid=\""+result[i].scenicId+"\">收藏</a></div>"
						+ "</div>" + "</div>"
						+ "</div>"+ "</div>" + "</div>";

			}
			$("#top-scenic").html(content);
		}
	</script>
</body>
</html>